<template>
  <div class="home card">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>数据统计</span>
        </div>
      </template>
      <VChart ref="chartRef" class="chart" :option="chartOption" style="width: 100%; height: 400px" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

// 注册必须的组件
use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]);

const chartRef = ref<InstanceType<typeof VChart> | null>(null);

// 模拟数据
const chartData = {
  categories: ['司机', '设备', '车辆'],
  series: [
    {
      name: '数量',
      data: [120, 200, 150, 80, 70, 110]
    }
  ]
};

// 图表配置
const chartOption = {
  title: {
    text: '数据统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: chartData.series.map(item => item.name),
    bottom: 0
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: chartData.categories,
    axisLabel: {
      interval: 0,
      rotate: 30
    }
  },
  yAxis: {
    type: 'value'
  },
  series: chartData.series.map(item => ({
    name: item.name,
    type: 'bar',
    data: item.data,
    emphasis: {
      focus: 'series'
    },
    itemStyle: {
      borderRadius: [4, 4, 0, 0]
    }
  }))
};

onUnmounted(() => {
  // Vue-ECharts 组件会自动处理销毁，不需要手动调用 dispose
  chartRef.value = null;
});
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  .box-card {
    margin: 0 auto;
    max-width: 1200px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .chart {
      margin-top: 20px;
    }
  }
}
</style>
